<template>
  <!-- 登录窗口 -->
  <el-dialog
    class="my-dialog"
    v-model="dialogVisible"
    width="800px"
    top="230px"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <template #header="{ titleId }">
      <div class="my-header">
        <h4 :id="titleId" class="-mt-2 text-xl text-left text-black login-title">详情</h4>
        <el-icon class="my-close-btn" @click="() => (dialogVisible = false)">
          <Close />
        </el-icon>
      </div>
    </template>
    <div class="detail text-base">
      <div class="flex items-center">
        <img v-if="currentEnv" class="block" src="/Feeder/Img/88.png" alt="img" width="200" />
        <img v-else :src="`${baseURL}/Feeder/Img/88.png`" alt="Local Image" width="200" />
        <div>
          <div class="flex">
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Name</label
              ><span class="w-40 text-gray-500">{{ info.Name }}</span>
            </p>
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Number</label
              ><span class="w-40 text-gray-500">{{ info.Number }}</span>
            </p>
          </div>
          <div class="flex">
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Brand</label
              ><span class="w-40 text-gray-500">{{ info.Brand }}</span>
            </p>
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Station</label
              ><span class="w-40 text-gray-500">{{ info.Station }}</span>
            </p>
          </div>
          <div class="flex">
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Port</label
              ><span class="w-40 text-gray-500">{{ info.Port }}</span>
            </p>
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">IP</label
              ><span class="w-40 text-gray-500">{{ info.IP }}</span>
            </p>
          </div>
          <div class="flex">
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">OPID</label
              ><span class="w-40 text-gray-500">{{ info.OPID }}</span>
            </p>
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Activity</label
              ><span class="w-40 text-gray-500">{{ info.Activity ? '启用' : '未启用' }}</span>
            </p>
          </div>
          <div class="flex">
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Brand</label
              ><span class="w-40 text-gray-500">{{ info.Brand }}</span>
            </p>
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">Usage</label
              ><span class="w-40 text-gray-500">{{ info.Usage }}</span>
            </p>
          </div>
          <div class="flex">
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">ScrewQty</label
              ><span class="w-40 text-gray-500">{{ info.ScrewQty }}</span>
            </p>
            <p class="flex mb-4">
              <label class="block w-24 text-right mr-4 font-bold">InputQty</label
              ><span class="w-40 text-gray-500">{{ info.InputQty }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <p class="mt-10 text-right">
      <el-button type="primary" @click="dialogVisible = false"> 关 闭 </el-button>
    </p>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const currentEnv = import.meta.env.DEV
const baseURL = window.location.origin

interface Feeder {
  Name: string
  Number: string
  Brand: string
  IP: string
  Port: string
  Station: string
  OPID: string
  Activity: boolean
  Model: string
  Usage: string
  ScrewQty: string
  InputQty: string
}
const dialogVisible = ref(false)
let info = ref<Feeder>({
  Name: '',
  Number: '',
  Brand: '',
  IP: '',
  Port: '',
  Station: '',
  OPID: '',
  Activity: false,
  Model: '',
  Usage: '',
  ScrewQty: '',
  InputQty: ''
})
const open = (data: Feeder) => {
  info.value = data
  dialogVisible.value = true
}
defineExpose({ open })
</script>
<style scoped lang="less">
.my-close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  color: #666;
}
</style>
